
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <base id="base" href="${base}">
    <title>manage-system</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="keywords" content="vue.js, wms, vue2, 后台模板, 管理系统, element" />
    <meta name="description" content="基于Vue2 + Element UI 的后台管理系统解决方案" />
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
    <link href="https://at.alicdn.com/t/font_nm22c0552pqa1yvi.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">


</head>

<style>

</style>
<body>
<div id="test" style="display: none; width:100%;height: 100%;background-color:rgba(0,0,0,0.6)">

</div>
<div class="main_warp">
<div class="left-panel-warp">
    <div class="leftTools-warp vetically">
        <ul  class="leftTools-menu">
            <li  class="page select">
                <i class="iconfont icon-yemian"></i>
                <span>页面</span>
            </li>
            <li class="commons" >
                <i class="iconfont icon-component"></i>
                <span>组件</span>
            </li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <div class="left-panel-content" id="page-panel">
      <ul id="accordion" class="accordion">
        <li>
          <div class="link">
            <span class="iconfont icon-wenjian"></span>
            Desarrollo front-end
            <i class="icon iconfont icon-right"></i>
            <div class="buttons">
              <button type="button" class="btn btn-danger btn-xs"><i class="button iconfont icon-shanchu"></i></button>
              <button type="button" class="btn btn-primary btn-xs"><i class="button iconfont icon-bianji1"></i></button>
              <button type="button" class="btn btn-info btn-xs"><i class="button iconfont icon-tianjia"></i></button>
            </div>
          </div>
          <ul class="submenu">
            <li><a href="#">Javascript</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Frameworks javascript</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="left-panel-content commons" style="display:none;" id="commons-panel">
        <ul id="baseCommons" class="commonspanel">
        </ul>
        <div  class="other-commons-warp">
            <ul  class="other-commons-ul">
                <li>高级</li>
                <li>其他</li>
            </ul>
            <div class="weight-commons-pane " >
                <ul class="commonspanel" id="weightCommons">
                </ul>
            </div>
            <div class="other-commons-pane " >
                <ul class="commonspanel" id="otherCommons">
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="phone-wrap">
    <div class="phone-top">
        <img src="https://1251027630.cdn.myqcloud.com/1251027630/zhichi_frontend/static/webapp/images/phonetop.png">
    </div>
    <div class="phone-contents" id="phone-container">
        <div class="top-fixed-container">
            <span>首页</span>
        </div>
        <div class="app-wrap droppable"   style="height: calc(100% - 0px);">

        </div>
        <div class="bottom-fixed-container">
            <div> <span>方总</span></div>
        </div>
    </div>
    <div class="phone-bottom">
        <img src="https://1251027630.cdn.myqcloud.com/1251027630/zhichi_frontend/static/webapp/images/phonebottom.png">
    </div>
</div>



</div>
<script id="commons-form-base" type="text/html">
    <ul>
        <li></li>
    </ul>
</script>


<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- body 最后 -->

<script src="https://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.0.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.0.1/js/city-picker.min.js"></script>
<script src="js/handlebars.js"></script>
<script src="js/commons/common-all-min.js"></script>
<script src="js/utils/Utils.js"></script>
<script src="js/page.js"></script>
<script src="js/application,js"></script>
<script>
function isShowNan(type, isShow){
        let app=$(".app-wrap");
        if(type==1){
            var top= $(".top-fixed-container");

            if(isShow && top.is(":hidden")){
                top.show();
                app.css({"height":(app.height()-48)+"px","margin-top":'48px'});
            }
            if(!isShow && top.is(":visible")){
                top.hide();
                app.css({"height":(app.height()+48)+"px","margin-top":'0px'});
            }
        }else{
            var bottom= $(".bottom-fixed-container");
            if(isShow && bottom.is(":hidden")){
                bottom.show();
                app.css({"height":(app.height()-48)+"px","margin-bottom":'48px'});
            }
            if(!isShow && bottom.is(":visible")){
                bottom.hide();
                app.css({"height":(app.height()+48)+"px","margin-top":'0px'});
            }
        }
}

    $(document).ready(function() {
      $.common.init();
      $(".leftTools-menu li").click(function(){

        $(".select").removeClass("select");
        $(this).addClass("select");
        if($(this).is(".page")){
          $("#page-panel").show();
          $("#commons-panel").hide();
        }else {
          $("#page-panel").hide();
          $("#commons-panel").show();
        }
      });
      $("#page").click(function(){
        $("#page-panel").show();
      });

      var Accordion = function(el, multiple) {
      this.el = el || {};
      this.multiple = multiple || false;

      // Variables privadas
      var links = this.el.find('.link');
      // Evento
      links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
     }

      Accordion.prototype.dropdown = function(e) {
        var $el = e.data.el;
          $this = $(this),
          $next = $this.next();
          $next.slideToggle();
        $this.parent().toggleClass('open');

        if (!e.data.multiple) {
          $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
        };
      }

      var accordion = new Accordion($('#accordion'), false);
      $(".app-wrap").delegate(".commons-warp","click",function(e){
              e.preventDefault();
              $(".app-wrap .commons-warp.select").removeClass("select");
              let self=$(this);
              self.addClass("select");
              let params=self.data("params");
              alert(JSON.stringify(params))

      });
      $(".app-wrap").delegate(".ele-delete-icon","click",function(e){
              e.stopPropagation();
              let self=$(this);
              self.parent().parent().remove();
      });

      $(".other-commons-ul li").click(function(e){
                let index=$(this).index();
                $(".other-commons-warp .select").removeClass("select");
                $(this).addClass("select");
                $(".other-commons-panel:eq("+index+")").addClass("select");
      });
      /**template.defaults.imports.getImgHeightForImgList=function(size, column,height){
                height=parseInt(height.replace("px",''));
                var row=Math.ceil(size/column)
                return (height/row)+"px";
      }**/

   });


</script>


</body>
</html>
